<template>
    <div class="pkg-recommend-item" @click="onClick">
        <div class="img-box">
            <img :src="cover" mode="aspectFill" />
        </div>
        <div class="info-box">
            <div class="name hidden-text-v2 text-small font-bold">
                {{name}}
            </div>
            <div class="price">
                <span class="text-small color-font-red">¥{{priceText}}</span>
                <span class="text-tiny text-through">¥{{originalPriceText}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import {
    currency,
} from '@/lib/utils';

export default {
    name: 'PkgRecommendItem',
    props: {
        /** 封面 */
        cover: {
            type: String,
        },
        /** 名字 */
        name: {
            type: String,
        },
        /** 价格 */
        price: {
            type: String,
        },
        /** 原价 */
        originalPrice: {
            type: String,
        },
    },
    computed: {
        priceText() {
            return currency(this.price);
        },
        originalPriceText() {
            return currency(this.originalPrice);
        },
    },
    methods: {
        onClick() {
            this.$emit('click');
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.pkg-recommend-item {
    display: inline-block;
    width: 167px;
    padding: 10rpx 0;
    margin-right: 10px;
    .img-box {
        width: 167px;
        height: 96px;
        border-radius: 7px;
        box-shadow: 0px 1*2px 1*2px 0px rgba(0, 0, 0, 0.4);
        overflow: hidden;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .info-box {
        .name {
            height: 64rpx;
            margin-top: 10px;
        }
        .price {
            display: flex;
            align-items: center;
            margin-top: 10rpx;
            .text-small {
                margin-right: 10px;
            }
        }
    }
}
</style>
